<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<!-- Mirrored from www.nicolaegabriel.info/live/quickadmin/interface-elements.html by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 18 Oct 2012 18:29:07 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quickadmin - Interface elements</title>
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->
<!-- The 1140px Grid -->
<link rel="stylesheet" href="_layout/1140.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="_layout/styles.css" type="text/css"
	media="screen" />
<link rel='stylesheet' href='_themes/default.css' type='text/css'
	media='screen' />
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript"
	src="_layout/scripts/css3-mediaqueries.js"></script>
<!-- Fonts -->
<link
	href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:iamp;v1'
	rel='stylesheet' type='text/css' />
<!-- Scripts -->
<script type='text/javascript'
	src='../../../ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.minf24c.js?ver=1.6'></script>
<!-- Charts -->
<script type='text/javascript'
	src='_layout/scripts/jquery.raphael/raphael-min.js'></script>
<script type='text/javascript'
	src='_layout/scripts/jquery.morris/morris.min.js'></script>
<!-- WYSISYG Editor -->
<script type='text/javascript' src='_layout/scripts/nicEdit/nicEdit.js'></script>
<!-- Forms Elemets -->
<script type='text/javascript'
	src='_layout/scripts/jquery.uniform/jquery.uniform.min.js'></script>
<link rel='stylesheet'
	href='_layout/scripts/jquery.uniform/uniform.default.css'
	type='text/css' media='screen' />
<!-- Table sorter -->
<script type='text/javascript'
	src='_layout/scripts/jquery.tablesorter/jquery.tablesorter.min.js'></script>
<script type='text/javascript'
	src='_layout/scripts/table.resizable/resizable.tables.js'></script>
<script type='text/javascript' src='_layout/custom.js'></script>
</head>
<body>
	<div id="header-wrapper" class="container">
		<div id="user-account" class="row">
			<div class="threecol">
				<span>Welcome to the best Dashboard v1.0</span>
			</div>
			<div class="ninecol last">
				<a href="#">Logout</a> <span>|</span> <a href="#">My account</a> <span>|</span>
				<span>Welcome, <strong>Dawid!</strong></span>
			</div>
		</div>
		<div id="user-options" class="row">
			<div class="threecol">
				<a href="dashboard.html"><img class="logo"
					src="_layout/images/back-logo.png" alt="QuickAdmin" /></a>
			</div>
			<div class="ninecol last fixed">
				<ul class="nav-user-options">
					<li><a href="#"><img
							src="_layout/images/icons/icon-menu-profile.png"
							alt="Profile Settings" />&nbsp; Profile</a></li>
					<li><a href="#"><img
							src="_layout/images/icons/icon-menu-messages.png" alt="Messages" />&nbsp;
							Messages</a></li>
					<li><a href="#"><img
							src="_layout/images/icons/icon-menu-tasks.png" alt="Tasks" />&nbsp;
							Task</a></li>
					<li><a href="#"><img
							src="_layout/images/icons/icon-menu-users.png" alt="Users" />&nbsp;
							User list</a></li>
					<li><a href="#"><img
							src="_layout/images/icons/icon-menu-settings.png" alt="Settings" />&nbsp;
							Settings <img class="pin"
							src="_layout/images/back-nav-sub-pin.png" alt="" /></a>
						<ul>
							<li class="first"><a href="#">Item number 01</a></li>
							<li><a href="#">Item number 02</a></li>
							<li><a href="#">Item number 03</a></li>
							<li class="last"><a href="#">Item number 04</a></li>
							<li class="pin"></li>
						</ul></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div id="sidebar" class="threecol">
				<ul id="navigation">
					<li class="first"><a href="dashboard.html">Dashboard <span
							class="icon-dashboard"></span>
					</a></li>
					<li><a href="charts.html">Charts <span class="icon-charts"></span></a></li>
					<li><a href="form-elements.html">Form Elements <span
							class="icon-forms"></span></a></li>
					<li class="active"><a href="interface-elements.html">Interface
							Elements <span class="icon-elements"></span>
					</a></li>
					<li><a href="tables.html">Tables <span class="icon-tables"></span></a></li>
					<li><a href="gallery.html">Gallery <span
							class="icon-gallery"></span></a></li>
					<li class="sub"><a href="#l">Error pages <img
							src="_layout/images/back-nav-sub-pin.png" alt="" /> <span
							class="icon-error"></span></a>
						<ul>
							<li><a href="error-403.html">Error 403</a></li>
							<li><a href="error-404.html">Error 404</a></li>
							<li><a href="error-500.html">Error 500</a></li>
							<li class="last"><a href="error-503.html">Error 503</a></li>
						</ul></li>
					<li><a href="faq.html">F.A.Q. <span class="icon-faq"></span></a></li>
					<li class="last"><a href="calendar.html">Calendar <span
							class="icon-calendar"></span></a></li>
				</ul>
			</div>
			<div id="content" class="ninecol last">
				<div class="panel-wrapper">
					<div class="panel">
						<div class="tabs">
							<ul>
								<li class="active"><a href="#" rel="tab-01-content">Tab
										01</a></li>
								<li><a href="#" rel="tab-02-content">Tab 02</a></li>
								<li class="last"><a href="#" rel="tab-03-content">Tab
										03</a></li>
							</ul>
							<div class="collapse">collapse</div>
						</div>
						<div class="tabs-content">
							<!-- ## Panel Content  -->
							<div id="tab-01-content" class="active">
								<p>Quisque sollicitudin, felis id venenatis consectetur, sem
									sem rutrum lectus, ut tristique metus augue ac justo.
									Suspendisse mauris lectus, scelerisque nec commodo in, aliquet
									a ligula. Praesent auctor lobortis adipiscing. Nulla elit
									massa, ultrices in iaculis nec, elementum a magna. Pellentesque
									ut magna id nunc iaculis facilisis.</p>
								<p>Pellentesque tincidunt est nec odio fringilla bibendum.
									Aenean in justo neque, non lobortis ante. Vestibulum vitae
									turpis ut erat pretium eleifend et vel lorem. Donec nibh
									mauris, fermentum a elementum at, pretium et velit. Curabitur
									auctor ante a justo consequat tristique. Nulla facilisi. Cras
									sem risus, dictum placerat ullamcorper id, tempus nec tortor.
									Aenean sollicitudin pulvinar enim, at condimentum mauris mollis
									vel.</p>
							</div>
							<div id="tab-02-content">
								<p>Pellentesque tincidunt est nec odio fringilla bibendum.
									Aenean in justo neque, non lobortis ante. Vestibulum vitae
									turpis ut erat pretium eleifend et vel lorem. Donec nibh
									mauris, fermentum a elementum at, pretium et velit. Curabitur
									auctor ante a justo consequat tristique. Nulla facilisi. Cras
									sem risus, dictum placerat ullamcorper id, tempus nec tortor.
									Aenean sollicitudin pulvinar enim, at condimentum mauris mollis
									vel.</p>
							</div>
							<div id="tab-03-content">
								<p>Felis id venenatis consectetur, sem sem rutrum lectus, ut
									tristique metus augue ac justo. Suspendisse mauris lectus,
									scelerisque nec commodo in, aliquet a ligula. Praesent auctor
									lobortis adipiscing. Nulla elit massa, ultrices in iaculis nec,
									elementum a magna. Pellentesque ut magna id nunc iaculis
									facilisis.</p>
							</div>
							<!-- ## / Panel Content  -->
						</div>
					</div>
					<div class="shadow"></div>
				</div>
				<div class="notice warning">
					<span><strong>Warning:</strong> This is a warning message.
						You can use this to warn users on any events.</span>
				</div>
				<div class="notice info">
					<span><strong>Information:</strong> This is a information
						message. You can use this to warn users on any events.</span>
				</div>
				<div class="notice error">
					<span><strong>Error:</strong> Oooops, sorry... That action
						is not valid.</span>
				</div>
				<div class="notice success">
					<span><strong>Success:</strong> Success message!
						hoooraaay!!!!</span>
				</div>
				<div class="panel-wrapper fixed">
					<div class="panel ">
						<div class="title">
							<h4>Panel - Progress Bars</h4>
							<div class="collapse">collapse</div>
						</div>
						<div class="content spacing">
							<!-- ## Panel Content  -->
							<div class="progress-bar">
								<span>80%</span>
								<div>
									<div style="width: 80%"></div>
								</div>
							</div>
							<div class="progress-bar-full">
								<span>85%</span>
								<div>
									<div style="width: 85%"></div>
								</div>
							</div>
							<!-- ## / Panel Content  -->
						</div>
					</div>
					<div class="shadow"></div>
				</div>
				<div class="panel-wrapper fixed">
					<div class="panel ">
						<div class="title">
							<h4>Panel - Buttons</h4>
							<div class="collapse">collapse</div>
						</div>
						<div class="content spacing">
							<!-- ## Panel Content  -->
							<a href="#" class="button-white">Your label here</a> <a href="#"
								class="button-blue">Your label here</a> <a href="#"
								class="button-green">Your label here <img
								src="_layout/images/icons/icon-star-white.png" alt="" /></a> <a
								href="#" class="button-red">Your label here <img
								src="_layout/images/icons/icon-lock-white.png" alt="" /></a> <a
								href="#" class="button-pink">Your label here <img
								src="_layout/images/icons/icon-calendar-white.png" alt="" /></a>
							<!-- ## / Panel Content  -->
						</div>
					</div>
					<div class="shadow"></div>
				</div>
				<div class="panel-wrapper fixed">
					<ul class="breadcrumbs-navigation">
						<li><a href="#">Dashboard</a></li>
						<li><a href="#">Content</a></li>
						<li><a href="#">UI Elements</a></li>
					</ul>
				</div>
				<div class="panel-wrapper fixed">
					<ul class="page-navigation">
						<li><a href="#" class="prev"></a></li>
						<li><a href="#" class="">1</a></li>
						<li><a href="#" class="">2</a></li>
						<li><a href="#" class="">3</a></li>
						<li><a href="#" class="">4</a></li>
						<li><a href="#" class="">5</a></li>
						<li><a href="#" class="">...</a></li>
						<li><a href="#" class="">34</a></li>
						<li><a href="#" class="">35</a></li>
						<li><a href="#" class="next"></a></li>
					</ul>
				</div>
				<div class="panel-wrapper fixed">
					<div class="panel ">
						<div class="title">
							<h4>Panel - Icons</h4>
							<div class="collapse">collapse</div>
						</div>
						<div class="content spacing">
							<!-- ## Panel Content  -->
							<a class="icon" href="#"><img alt=""
								src="_layout/images/icons/icon-volume.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-user.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-users.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-unlock.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-time.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-tag.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-shutdown.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-settings.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-reload.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-refresh.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-print.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-picture.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-new.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-map.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-lock.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-list.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-grid.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-graph.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-fullscreen.png" /></a> <a
								class="icon" href="#"><img alt=""
								src="_layout/images/icons/icon-folder.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-fav.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-email.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-edit.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-download.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-docs.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-delete.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-cloud.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-chat.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-cancel.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-calendar.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-calc.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-brush.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-attach.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-archive.png" /></a> <a class="icon"
								href="#"><img alt=""
								src="_layout/images/icons/icon-archive.png" /></a>
							<!-- ## / Panel Content  -->
						</div>
					</div>
					<div class="shadow"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- Mirrored from www.nicolaegabriel.info/live/quickadmin/interface-elements.html by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 18 Oct 2012 18:29:25 GMT -->
</html>
